<!-- 网页执行 网上往下执行 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1、引入vue.js -->
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 2、创建视图 -->
    <div id="app">
        <!-- 3、局部组件的使用 -->
    <!-- <custom-btn></custom-btn> -->
    <btn></btn>

    <template id="btn">
        <div>
            <button>按钮一</button>
        <button>按钮二</button>
        <button>按钮一</button>
        </div>
    </template>

    </div>
</body>

</html>
<script>

    
    // 需求： 定义一个全局组件
    // Vue.component("组件名","{组件参数}")
    /**
     * 1、定义一个局部组件，功能为点击按钮+1
     **/ 
    const btn = {
        //  @click='add' 调用methods下面的add方法
        template:"#btn",
        data(){
            return {
                count:100
            }
        },
        methods:{
            // 定义哥累加方法
            add(){
                //实现累加
                this.count = this.count+100
            } 
        }
    }

    // 3、创建实例
    new Vue({
        el: "#app", //必传
        //2、挂载
        components:{
            // customBtn:btn
            btn
        }
    })

</script>